<template>
   <div class="total" >
    <!-- 头部标签 -->
 <header>
   
  <div class="card">
    <div class="litle">
     <div class="pic">
      <img src="../assets/个人中心/切图/头像男 拷贝 4.png" alt="">
      <p>{{data.remark}}</p>
    </div>
   <van-divider
  :style="{ borderColor: 'gray',paddingTop: '.01rem' }"
>
</van-divider>
   <div>
<van-row type="flex" justify="center">
  <van-col span="10"><i>姓名 </i><span>{{data.nickName}}</span></van-col>
  <van-col span="12"><i>联系方式 </i><span>{{data.phone}}</span></van-col>
  
</van-row>
   </div>
    </div>
    <!-- 内容 -->
 <div class="content">
   <van-row type="flex" justify="center" @click="$router.push('/userInfo')">
  <van-col span="18"><i><img src="../assets/个人中心/切图/Personal information.png" alt=""></i><span>个人信息</span></van-col>
  <van-col span="4"><span><img src="../assets/个人中心/切图/More.png" alt=""></span></van-col>
</van-row>
    <van-row type="flex" justify="center">
  <van-col span="18"><i><img src="../assets/个人中心/切图/形状 2.png" alt=""></i><span>支付中心</span></van-col>
  <van-col span="4"><span><img src="../assets/个人中心/切图/More.png" alt=""></span></van-col>
</van-row>
       <van-row type="flex" justify="center">
  <van-col span="18"><i><img src="../assets/个人中心/切图/change Password.png" alt=""></i><span>修改密码</span></van-col>
  <van-col span="4"><span><img src="../assets/个人中心/切图/More.png" alt=""></span></van-col>
</van-row>
        <van-row type="flex" justify="center">
  <van-col span="18"><i><img src="../assets/个人中心/切图/Version Information.png" alt=""></i><span>版本信息</span></van-col>
  <van-col span="4"><span>{{version}}  <img src="../assets/个人中心/切图/More.png" alt=""></span></van-col>
</van-row>
        <van-row type="flex" justify="center"  @click='$router.push("/login")'>
  <van-col span="18"><i><img src="../assets/个人中心/切图/组 16.png" alt=""></i><span>清除缓存</span></van-col>
  <van-col span="4"><span><img src="../assets/个人中心/切图/More.png" alt=""></span></van-col>
</van-row>
 </div>
  </div>
 </header>
 <div class="bott" color="#666666">
   <van-button color="#e9e9e9" type="primary"  @click='comfir' >退出登录</van-button>
 </div>
 <van-popup v-model="show" class="confir"><div class="con">
   <div class="dd">是否退出登录</div>
   <div><van-button type="default" @click="show=flase">取消</van-button><van-button type="default" @click="$router.push('/')">确定</van-button></div>
   </div></van-popup>
 <!-- 底部 -->
 <div >
<van-row class="bottom" type="flex" justify="center">
  <van-col span="8" @click='$router.push("/login")'><img src="../assets/个人中心/切图/形状 557.png" alt=""><i>系统功能</i></van-col>
  <van-col  span="6"><img src="../assets/个人中心/切图/矢量智能对象 拷贝.png" alt=""><i>联系</i></van-col>
  <van-col  span="8" @click='$router.push("/user")'><img src="../assets/个人中心/切图/矢量智能对象.png" alt=""><i>个人中心</i></van-col>
</van-row>
 </div>
   </div>
</template>

<script>
import {getUserInfo,getVersion,getUserList} from '../request/api'
export default {
  data(){
    return{
      data:[],
      version:'',
      show:false
    }
  },
  created(){
        // getUserInfo().then(res=>{
        //   console.log(res.data);
        //   this.data=res.data
        // })
        getVersion().then(res=>{
          console.log(res.data);
          this.version=res.data.versions
        })
        getUserList().then(res=>{
          console.log(res.data);
          this.data=res.data
        })
  },
  methods:{
    comfir(){
      this.show=true
      localStorage.clear()
      this.$store.commit('change',10)
    },
    
  },
 
}
</script>

<style lang='less' scoped>
html{
  background-color:#f5f5f5;
  
}
*{
    font-size: .14rem!important;
}
header{
    background: #003399;
    height: 1.5rem;
    width: 100%;
    text-align: center;
  .van-col--4,.van-col--12{
    text-align: right;
  }
   .card{
     width: 90%;
     position: absolute;
     top:10%;
     left: 5%;
     background: #ffffff;
     .van-col--10,.van-col--18{
       text-align: left;
     }
   }
   .content{
     margin: 5% 0;
     line-height: .45rem;
     height: .45rem;
     img{
      vertical-align: middle;
     }
    .van-row{
      background: white;
    }
     
   }
}
.confir{
  width: 60%;
  height: 10%;
   text-align: center;
 .con{
   width: 100%;
   height: 100%;
    dd{
    width: 100%;
    
    
  }
  .van-button{
    width: 50%;
   
  }
 }
}
.bott{
  // background: white;
  position: absolute;
  width: 100%;
  bottom: 12%;
  .van-button{
  margin: .1rem .15rem;
  width: 92%;
}
}
.bottom{
  position: fixed;
  bottom: 0;
  background: #ffffff;
  width: 100%!important;
  height: 10%;
  .van-col{
    display: flex;
    align-content: center;
    justify-content: center;
    flex-wrap: wrap;
    text-align: center;
    
     img{
       width: 20%;
      //  height: 50%;
     }
    i{
      width: 100%;
      padding: .1rem;
    }
  }
}
</style>